<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animated Login Form</title>

</head>

<body>
    <div class="box" id="app">
        <form autocomplete="off">
            <h2>登录页面</h2>
            <div class="inputBox">
                <input type="text" required="required" v-model="user.username">
                <span>UserName</span>
                <i></i>
            </div>
            <div class="inputBox">
                <input type="password" required="required" v-model="user.userpass" >
                <span>PassWord</span>
                <i></i>
            </div>
            <div class="inputBox">
                <input type="text" required="required" v-model="yzm">
                <span>验证码</span>
                <i></i>
            </div>
            <img :src="img" alt="" width="96" height="37" @click="change" style="margin-left: 200px;"/>
            <input type="button" @click="login()" value="提交"></input>
            <div>
                <h5>没账号? <a href="regin.html" style="color: blue;">注册</a></h3>
            </div>

           
        </form>
     

    </div>
</body>
</center>
<script>
    var app = new Vue({
        el: '#app',
        data: {//数据存储的地方
            yzm: "",
            img: "http://localhost:8082/db137/ZcYzmServlet",
            user: {
                username: "",
                userpass: ""
            },
          
        },
        methods: {//方法

            login() {
                axios.get("http://localhost:8082/db137/str"
                ).then((result) => {//成功后的回调函数(获取后端接口返回的数据)
                    if (result.data == this.yzm) {
                        //调用后端接口 /*{ params: { username: this.user.username, userpass: this.user.userpass } },*/
                        axios.post(HTTPPATH+"login",this.user).then((result) => {//成功后的回调函数(获取后端接口返回的数据)
                            console.log(result.data);
                            //alert(JSON.stringify(result.data))
                            if (result.data.code == 200) {
                                let token = result.data.data.jwtToken;
                                //把token存到本地存储
                                window.localStorage.setItem("token", token);
                                location.href = "tree.html"
                                alert(result.data.msg)
                            }

                        })
                    } else {
                        alert("验证码错误")
                    }
                })
            }, change() {
                    this.img = "http://localhost:8082/db137/ZcYzmServlet?" + new Date().getTime();
            }
        }
    })
</script>
<!-- 这是写css代码的地方 css-> scoped 代表只能在本页面使用 -->
<style scoped>
    h5 {
        color: white;
    }
</style>
</body>

</html>